import { createElement, render, renderDom } from "./vitureDom";
import domDiff from "./domDiff";
import doPatch from "./doPatch";

const vDom = createElement(
  "ul",//type
  {//props
    class: "list",
    style: "width:200px;height:200px;background:#ccc;",
  },
  //children
  [
    createElement(
      "li",
      {
        class: "item",
        "data-index": 0,
      },
      [createElement("p", { class: "text" }, ["第一个列表"])]
    ),
    createElement(
      "li",
      {
        class: "item",
        "data-index": 1,
      },
      [
        createElement("p", { class: "text" }, [
          createElement(
            "span",
            {
              class: "title",
            },
            ["第二个列表"]
          ),
        ]),
      ]
    ),
    createElement(
      "li",
      {
        class: "item",
        "data-index": 2,
      },
      ["第三个列表项"]
    ),
  ]
);

const vDom2 = createElement(
  "ul",
  {
    class: "list-wrap",
    style: "width:500px;height:200px;background:red;",
  },
  [
    createElement(
      "li",
      {
        class: "item",
        "data-index": 0,
      },
      [createElement("p", { class: "title" }, ["特殊列表"])]
    ),
    createElement(
      "li",
      {
        class: "item",
        "data-index": 1,
      },
      [createElement("p", { class: "text" }, [])]
    ),
    createElement(
      "div",
      {
        class: "item",
        "data-index": 2,
      },
      ["第三个列表项"]
    ),
  ]
);

const rDom = render(vDom);
// console.log(rDom);
// console.log(vDom);

renderDom(rDom, document.getElementById("app"));

const patches = domDiff(vDom, vDom2);
console.log(patches);

doPatch(rDom, patches);
